import React, { PureComponent } from 'react';
import { Modal, List, InputItem, WhiteSpace, Button, WingBlank, Menu, ActivityIndicator, NavBar, TabBar, Card, Flex, Grid } from 'antd-mobile';
import { connect } from 'dva';
import ast from './index.less';
import md5 from 'md5'
import { setCookie } from '../../utils/auth'
import { createForm, formShape } from 'rc-form';
import { Divider } from 'antd';
const PlaceHolder = ({ className = '', ...restProps }) => (
  <div className={`${className} placeholder`} {...restProps}>Block</div>
);

class Culture extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      initData: '',
      show: false,
      selectedTab: 'redTab',
      hidden: false,
      fullScreen: false
    };
  }
  onChange = (value) => {
    let label = '';
  }
  handleClick = (e) => {
    e.preventDefault(); // Fix event propagation on Android
    this.setState({
      show: !this.state.show,
    });
  }

  onMaskClick = () => {
    this.setState({
      show: false,
    });
  }

  render() {
    const { show } = this.state;
    var tabs = [];
    if (this.props.appNav != 0) {
      (JSON.parse(localStorage.getItem("menu")).find(s => s.rel == this.props.appNav)).children.map((req, key) => {
        if (req.children != '') {
          req.children.map(three => {
            tabs.push({
              ...three,
              icon: 'https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2881502819,1702418975&fm=58&bpow=400&bpoh=400',
              text: three.title
            })
          })
        }
      })
    }
    return (
      <div className={show ? ast.menu_active : ''}>
        <div><img src={require('../../assets/banner.jpg')} className={ast.banner} /></div>
        <Grid data={tabs} columnNum={3} onClick={s => this.props.dispatch({ type: 'auth/redirect', payload: { url: s.mobileUrl } })} renderItem={dataItem => (
          <div style={{ padding: '12.5px' }}>
            <img src={dataItem.icon} style={{ width: '4.3rem', height: '4.3rem', marginTop: '.2rem' }} alt="" />
            <div style={{ color: '#888', fontSize: '1rem', marginTop: '.8rem' }}>
              <span style={{ fontSize: '1rem' }}>{dataItem.text}</span>
            </div>
          </div>
        )} />
      </div>

    );
  }
}
function mapStateToProps(state) {
  return {
    appNav: state.auth.appNav
  }
}
export default connect(mapStateToProps)(Culture);
